<template>
  <div class="main-content" id="main">
    <div class="flex">
      <div @click="hidde()" style="flex: 1;height: 100%">
        <!-- 面料号查询 -->
        <table>
          <tr>
            <td>
              <div class="flex flex-a-center search-box">
                <span>商品编号</span>
                <input @input="queryFabriclIstByCode" type="text" placeholder="请输入商品编号"
                       v-model="fabricCode"/>
              </div>
            </td>
            <td>
              <div class="flex flex-a-center search-box">
                <span>商品类型</span>
                <el-select v-model="goodstypeid">
                  <el-option v-for="(item,index) in typeList" :key="index" :label="item.goodsTypeName"
                             :value="item.id"></el-option>
                </el-select>
                <!--                <input @input="queryFabriclIstByCode" type="text" placeholder="请选择商品类型"
                                       v-model="fabricCode"/>-->
              </div>
            </td>
            <td>
              <div style="display: inline">
                <el-button type="primary"
                           style="margin-left: 10px;background-color: #2D2D2D;color: #e88f09;"
                           @click="queryFabriclIstByCode(),getGoodsSeriesByGoodsTypeFunc()">查询
                </el-button>
                <el-button type="primary"
                           style="margin-left: 10px;background-color: #2D2D2D;color: #e88f09;"
                           @click="$router.go(-1)">返回
                </el-button>
              </div>
            </td>
          </tr>
        </table>

        <!-- 商品系列 -->
        <div class="flex flex-a-start search-box">
          <span>商品系列</span>
          <ul class="flex checks">
            <li class="flex flex-a-center">
              <label>
                <input name="type" type="radio" value="" @click="typeid='',getFabricList()"/>&nbsp;全部
              </label>
              <label style="margin-left: 10px" v-for="(item,key) in fabricTypeList" :key="item.id">
                <input name="type" type="radio"
                       :value="item.id" @click="typeid=item.id,queryFabric()"
                       :label="item.seriesName">&nbsp;{{ item.seriesName }}
              </label>
            </li>
          </ul>
        </div>

        <!-- 面料 -->
        <ul class="flex materials" v-cloak>
          <!--暂时移除详情-->
          <!--          @click.stop="orderShow = true,fabricId = item.id,getFabeicDetail(),listFabricPriceFunc()"-->
          <li
              v-for="(item, key) in fabricList"
              :key="item.id"
              @click.stop="jump_goodsDetail(item.id)"
          >
            <el-image class="img"
                      :src="item.goodsMainImg"
                      fit="fit" v-cloak>
            </el-image>
            <span class="name">{{ item.goodsName }}</span>
            <span style="margin-top:10px" class="name">{{ item.goodsCode }}</span>
            <!--            <span style="margin-top:10px" class="name">库存：{{ item.inventory }}米</span>-->
          </li>
        </ul>

        <!--分页插件-->
        <div class="mom-pagination">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="pageTotal"
              :page-size="pageSize"
              @next-click="currentPage+=1,handleCurrentChange"
              @prev-click="currentPage-=1,handleCurrentChange"
              @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!--为你推荐-->
    <div style="width:100%;background-color: #f5f5f5;height: 40px;margin-top:20px"></div>
    <div>
      <div class="time_box fl">
        <div class="time_line"></div>
      </div>
      <div class="time_box fr">
        <div class="time_line"></div>
      </div>
      <div>
        <p style="text-align: center;margin-top: 40px;font-size: 25px;font-weight: bolder">为您推荐</p>
      </div>

    </div>

    <!-- 主推面料 -->
    <ul class="flex materials" v-cloak>
      <!--暂时移除详情-->
      <!--          @click.stop="orderShow = true,fabricId = item.id,getFabeicDetail(),listFabricPriceFunc()"-->
      <li
          v-for="(item, key) in firstGoodsList"
          :key="item.id"
      >
        <el-image class="img"
                  :src="item.goodsMainImg"
                  @click.stop="jump_goodsDetail(item.id)"
                  fit="fit" v-cloak>
        </el-image>
        <span class="name">{{ item.goodsName }}</span>
        <span style="margin-top:10px" class="name">{{ item.goodsCode }}</span>
        <!--            <span style="margin-top:10px" class="name">库存：{{ item.inventory }}米</span>-->
      </li>
    </ul>

    <!--分页插件2-->
    <div class="mom-pagination">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="pageTotal2"
          :page-size="pageSize2"
          @next-click="currentPage2 += 1,handleCurrentChange"
          @prev-click="currentPage2 -= 1,handleCurrentChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>


    <!-- 菜单2 -->
    <div class="fixed-btn-box" :class="{ open: fixedOpen }" @click="fixedOpen = !fixedOpen">
      <span class="fixed-btn"></span>
      <ul class="nav-list">
        <li>
          <span @click="shoppingShow = !shoppingShow,updateCart()">购物车</span>
        </li>
        <li>
          <span @click="$router.push('my-order')">查看订单</span>
        </li>
      </ul>
    </div>

    <!-- 购物车 -->
    <shopping :shoppingShow="shoppingShow" ref="shopp"></shopping>

  </div>
</template>
<script>
import shopping from "../../components/GoodsShopping.vue";
import {getAction, postAction} from "../../api/manage";
import Qs from "qs";


export default {
  data() {
    return {

      // 商品类型列表（查询条件）
      typeList: [],
      // 选中的商品列表
      goodstypeid: '',
      // 主推商品列表
      firstGoodsList: [],

      fixedOpen: false,

      // 用于普通商品件
      pageTotal: 0, // 总条目
      pageSize: 30, // 页面大小
      currentPage: 1, // 当前页

      // 用于主推商品的分页插件
      pageTotal2: 0, // 总条目
      pageSize2: 30, // 页面大小
      currentPage2: 1, // 当前页


      applymethod: '0',
      orderSn: '',// 购物车传递过来的面料订单编号
      radio1: '', // 支付方式
      orderMoney: '', // 购物车传递过来的订单金额
      drawer: false, // 支付弹窗是否显示
      autohor_token: localStorage.getItem("token"), //token
      userDetail: {}, // 当前账户详情
      priceList: [], // 面料的阶梯售价
      url: {
        // 商品系列
        getGoodsSeries: '/buygoods/getGoodsSeries',
        // 商品类型名下的商品系列
        getGoodsSeriesByGoodsType: '/buygoods/getGoodsSeriesByGoodsType',
        // 商品列表
        getGoods: '/buygoods/getGoods',
        // 商品类型，用于下拉列表
        laGoodsType: '/goodsCenter/laGoodsType',
        // 主推商品列表
        list: '/goodsCenter/getFirstGoodsList',


        fabricList: '/fabric/getFabricList', // 面料列表
        fabricDetail: '/fabric/getFabricDetailByID', // 面料详情
        addCart: '/cart/insertCart', // 添加购物车
        listFabricPrice: '/cart/listFabricPrice', // 查询面料的阶梯售价
        userDetail: '/fabricAndOther/getUserDetail', // 查余额
        buyNow: '/Order/buyNow', // 立即支付
        apply_zfb: '/apply/pay/config_order', // 支付宝支付1
        apply_zfb2: '/ali/pay/order/create' // 支付宝支付2
      },
      typeid: '', // 面料类型ID
      fabricId: '',// 点击的面料ID
      fabricCode: '',// 输入的面料编码
      fabricTypeList: [], // 面料列表
      fabricList: [], // 获取到的面料列表
      fabricDetail: {}, // 获取的面料详情
      shoppingShow: false,
      orderShow: false,
      materials: {
        name: "现货羊毛精纺面料 353167可机洗精纺西装面料 布粒粒毛呢面料工厂",
        idNum1: "2561IOU",
        idNum2: "LVII033147",
        price: 390,
        num: 1,
        sumNum: 366157,
        info1: "SUPER110`S",
        info2: "羊毛",
        info3: "260g",
        info4: "人字",
        info5: "米色",
        info6: "150cm",
        remack: ""
      }
    };
  },
  created() {
    this.getFirstGoods()
    this.laGoodsTypeFunc()
    this.getFabricType()
    this.getFabricList()
    this.getuserDetail()
  },
  components: {shopping},
  methods: {
    jump_goodsDetail(goods_id) {
      console.log(goods_id)
      //跳转商品详情
      this.$router.push({path: '/goods-detail', query: {goods_id: goods_id}})
    },
    /**
     * 选择商品类型之后，查询类型名下的商品系列
     */
    getGoodsSeriesByGoodsTypeFunc() {
      getAction(domain.publicUrl + this.url.getGoodsSeriesByGoodsType, {
        'token': this.autohor_token,
        'type': this.goodstypeid
      }).then(res => {
        if (res.data.code == '0') {
          this.fabricTypeList = res.data.data
        }
      })
    },

    /**
     * 获取主推商品
     */
    getFirstGoods() {
      getAction(domain.publicUrl + this.url.list).then(res => {
        this.firstGoodsList = res.data.result.records
        this.pageTotal2 = res.data.result.total
        this.pageSize2 = res.data.result.size
      })
    },

    /**
     * 获取商品类型下拉列表
     */
    laGoodsTypeFunc() {
      getAction(domain.publicUrl + this.url.laGoodsType).then(res => {
        if (res.data.code == '0') {
          this.typeList = res.data.data
        }
      })
    },

    // 查询按钮
    onSubmit() {
      getAction(domain.publicUrl + this.url.getGoods, {
        'pageNo': this.currentPage,
        'goodsCode': this.fabricCode,
        'goodsType': this.goodstypeid
      }).then(res => {
        this.fabricList = res.data.data.records
        this.pageTotal = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },

    numberChange() {//面料米数的监听事件
      var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
      if (!reg.test(this.materials.num)) {
        this.$message.warning("请输入正确的米数,比如1或1.1")
        this.materials.num = '1.0';
        return
      } else {
        let inputnumber = this.materials.num;//10.234
        // alert(inputnumber+"==="+inputnumber.toString().split(".").length)
        if (inputnumber.toString().split(".").length == 0) {
          this.materials.num = inputnumber;
          return;
        } else {
          var number_zu = inputnumber.toString().split(".");
          // alert("拿了米=="+number_zu)
          var jisaun_number = inputnumber.toString().split(".").join("");
          // alert("数组=="+number_zu+"==涨肚="+number_zu.length+"=小数点后的=="+number_zu[1].length)
          if (number_zu[1].length >= 0 && number_zu[1].length < 2) {
            this.materials.num = inputnumber;
            return;
          } else if (number_zu[1].length >= 2) {
            let num1 = jisaun_number / 100 + 0.1;
            let num2 = num1 * 10;
            let num3 = num2 / 10;
            var number_zu2 = num3.toString().split(".");
            let lostnum = number_zu2[0] + "." + number_zu2[1].substring(0, 1)
            // var str = num3.substring(0,num3.length-1);//截取第二个到第四个之间的字符 cd
            // alert(inputnumber+"==最后孩子=="+num1+"==="+num3+"==最后="+number_zu2+"=="+lostnum)
            this.materials.num = lostnum;
            return;
          }
        }
      }
    },


    // 分页触发请求
    handleCurrentChange(val) {
      this.currentPage = val
      this.onSubmit()
    },

    /**
     * 查询面料的阶梯售价
     */
    listFabricPriceFunc() {
      getAction(domain.publicUrl + this.url.listFabricPrice, {
        'id': this.fabricId
      }).then(res => {
        if (res.data.code == '0') {
          this.priceList = res.data.data
        }
      })
    },

    // 立即支付
    buynow() {
      if (this.radio1 == '') {
        this.$message.warning("请选择支付方式!")
        this.applymethod = '0';
        return;
      } else if (this.radio1 == '1') {
        this.applymethod = '1';
        var params = {
          token: this.autohor_token,
          applyMethod: this.applymethod,
          orderType: '0',
          orderSn: this.orderSn
        };
        postAction(domain.publicUrl + this.url.apply_zfb2, Qs.stringify(params)).then(res => {
          this.$message.warning("====" + res.data);
          this.drawer = false
          if (res.data.code == '0') {
            this.$message.success("支付成功")
          } else {
            this.$message.error(res.data.msg)
          }
        })
        // getAction(domain.publicUrl + this.url.apply_zfb, {
        //     'token': this.autohor_token,
        //     'orderType': 3,
        //     'orderSn': this.orderSn
        // }).then(res => {
        //     this.$message.warning(this.applymethod+"===="+res.data);
        //     this.drawer = false
        //     if (res.data.code == '0') {
        //         this.$message.success("支付成功")
        //     } else {
        //         this.$message.error(res.data.msg)
        //     }
        // })

      } else if (this.radio1 == '2') {
        this.applymethod = '2';
        this.$message.warning("正在开发中")
        return;
      } else if (this.radio1 == '3') {
        this.applymethod = '3';
        getAction(domain.publicUrl + this.url.buyNow, {
          'token': this.autohor_token,
          'orderType': 3,
          'orderSn': this.orderSn,// 订单编号
        }).then(res => {
          this.drawer = false
          if (res.data.code == '0') {
            this.$message.success("支付成功")
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },

    // 查询用户详情
    getuserDetail() {
      getAction(domain.publicUrl + this.url.userDetail, {
        'token': this.autohor_token
      }).then(res => {
        if (res.data.code == '0') {
          this.userDetail = res.data.data
        }
      })
    },

    // 支付界面弹窗
    openBuy(orderMoney, orderSn) {
      this.orderMoney = orderMoney
      this.orderSn = orderSn
      this.drawer = true
      this.shoppingShow = false;
    },

    updateCart() { // 刷新购物车列表数据
      this.$refs.shopp.getCartList()
    },
    addCar(fabricid, bynum) {// 添加购物车
      getAction(domain.publicUrl + this.url.addCart, {
        'token': this.autohor_token,
        'fabricId': fabricid,
        'buyNumber': bynum,
        'remark': this.materials.remack
      }).then(res => {
        if (res.data.code == '0') {
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    getFabeicDetail() { // 获取面料详情
      getAction(domain.publicUrl + this.url.fabricDetail, {'id': this.fabricId}).then(res => {
        if (res.data.code == '0') {
          this.fabricDetail = res.data.data
        }
      })
    },

    // 根据商品系列查询商品查询面料
    queryFabric() {
      getAction(domain.publicUrl + this.url.getGoods, {
        'token': this.autohor_token,
        'goodsGroup': this.typeid,
      }).then(res => {
        if (res.data.code == '0') {
          this.fabricList = res.data.data.records
          this.pageTotal = res.data.data.total
          this.pageSize = res.data.data.size
        }
      })
    },

    // 获取商品系列
    getFabricType() {
      getAction(domain.publicUrl + this.url.getGoodsSeries, {
        'token': this.autohor_token,
      }).then(res => {
        if (res.data.code == '0') {
          this.fabricTypeList = res.data.data
        }
      })
    },

    // 获取商品列表
    getFabricList() {
      getAction(domain.publicUrl + this.url.getGoods).then(res => {
        if (res.data.code == '0') {
          this.fabricList = res.data.data.records
          this.pageTotal = res.data.data.total
          this.pageSize = res.data.data.size
        }
      })
    },


    // 根据商品和商品类型查询商品
    queryFabriclIstByCode() {
      getAction(domain.publicUrl + this.url.getGoods, {
        'token': this.autohor_token,
        'goodsCode': this.fabricCode,
        'goodsType': this.goodstypeid
      }).then(res => {
        if (res.data.code == '0') {
          this.fabricList = res.data.data.records
          this.pageTotal = res.data.data.total
          this.pageSize = res.data.data.size
        }
      })
    },
    hidde() {
      this.orderShow = false;
      this.shoppingShow = false;
    },
    minus() {
      if (this.materials.num <= 0) {
        this.materials.num = 1
      }
      if (this.materials.num != 1) {
        this.materials.num--;
      }
    },
    add() {
      this.materials.num++;
    }
  }
};
</script>
<style lang="scss">

* {
  margin: 0;
  padding: 0;
}

.clear {
  zoom: 1;
}

.clear:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.head_title {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.fl {
  margin-left: 200px;
  margin-top: 20px;
  float: left;
}

.fr {
  margin-right: 200px;
  float: right;
  margin-top: 20px;
}

.time_box {
  position: relative;
  width: 200px;
}

.time_line {
  content: '';
  //position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  //top: 24px;
  height: 2px;
  background-color: #dcdcdc;
  z-index: -1;
}

.title_text {
  font-size: 28px;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
}

.fixed-btn-box {
  position: fixed;
  left: 40px;
  bottom: 20px;
  display: flex;
  z-index: 10;

  .fixed-btn {
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: url('~@/assets/img/group-order/u3869.svg') #555555 center center;
    z-index: 2;
  }

  .nav-list {
    z-index: 1;
    max-width: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: white;
    transition: all 0.2s linear;
    opacity: 0;

    li {
      font-size: 13px;
      margin: 0 15px;
      cursor: pointer;
      white-space: nowrap;

      &,
      a {
        color: #333;
        text-decoration: none;
      }
    }
  }

  &.open {
    .fixed-btn {
      background: url('~@/assets/img/group-order/u3871.svg') #555555 center center;
    }

    .nav-list {
      opacity: 1;
      max-width: 500px;
    }
  }
}

.main-content {
  margin: 30px 90px;
  padding: 40px 45px;
  /*height: 700px;*/
  font-size: 14px;
  color: #303030;
  background: #ffffff;
  position: relative;

  .search-box {
    margin-bottom: 20px;

    span {
      display: block;
      width: 80px;
      font-weight: bold;
      text-align: right;
      margin-right: 20px;
    }

    > input {
      width: 310px;
      height: 40px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      padding: 15px;
      box-sizing: border-box;
    }

    /*.checks {
        flex-wrap: wrap;

        li {
            margin-right: 30px;
            margin-bottom: 20px;
        }
    }*/
  }

  .materials {
    flex-wrap: wrap;

    li {
      width: 126px;
      height: 200px;
      box-sizing: border-box;
      padding: 6px 6px 13px;
      background: #ffffff;
      border-radius: 3px;
      text-align: center;
      border: 1px solid #e3e3e3;
      margin-right: 14px;
      margin-bottom: 15px;

      .img {
        width: 100%;
        height: 110px;
        background: #788088;
        border-radius: 3px;
        margin-bottom: 10px;
      }

      .name {
        width: 91px;
        line-height: 23px;
        font-size: 14px;
        color: #303030;
        display: inline-block;
        background: #f5f5f5;
        border-radius: 3px;
        text-align: center;
      }
    }

    .li-active {
      border: 1px solid #f9d805;
    }

    li:hover {
      border: 1px solid #f9d805;
    }
  }

  /*input[type="checkbox"] {
      width: 14px;
      height: 14px;
      background: #ffffff;
      border: 1px solid #c9c9c9;
      border-radius: 2px;
      color: #ffffff;
      text-align: center;
      line-height: 13px;
      font-size: 12px;
      -webkit-appearance: none;
      appearance: none;
      outline: none;
      vertical-align: middle;
      margin-right: 5px;
  }*/

  /*input[type="checkbox"]:hover {
      border: 1px solid #585757;
  }*/

  /*input:checked {
      color: #f9d532;
      background-color: #585757;
      border: 1px solid #585757;
  }*/

  /*input:after {
      !*content: "\2713";*!
  }*/
}

.mom-pagination {
  text-align: center;
  margin: 35px 0 0;
}

[v-cloak] {
  display: none;
}
</style>
